import React, { Component } from 'react'
import YHNav from "../nav/YHNav"
import { withRouter } from "react-router-dom"
import "./Community.scss"
import { getCategories } from "../../data/api"


class Community extends Component {

    state = {
        categories: [], //全部分类信息
        select_index: 0,  //默认选中第0个
        rightContent: [],  //存放右边的内容项
    }

    async componentDidMount() {
        let res = await getCategories();
        console.log(res);
        let message = res.message || []
        this.setState({
            categories: message,
            rightContent: message[0],

        })
    }

    handleItemClick = (e) => {
        // console.log(e.target.dataset);
        let { index } = e.target.dataset
        // console.log(index); 结构处对应的下标
        index = parseInt(index)
        this.setState({
            select_index: index,
            rightContent: this.state.categories[index],
        })
    }

    // 分类菜单右边点击跳转
    // handleProductItemClick= (cid) => {
    //     this.props.history.push("searchgoods/"+cid)
    // }
    // 跳转到产品列表页面
    handleProductItemClick = (cid) => {
        this.props.history.push("goodList?cid=" + cid);
        
    }


    render() {
        return (
            <div className="categoryContent">
                {/* 顶部导航开始 */}
                <YHNav title="商品分类"></YHNav>
                {/* 顶部导航结束 */}
                {/* 分类内容栏开始 */}
                <div className="categoryContentBox">
                    {/* 左边目录区开始 */}
                    <div className="categoryContentLeft" onClick={this.handleItemClick}>
                        {this.state.categories.map((c, index) => {
                            return <div
                                data-index={index}
                                className={this.state.select_index === index ? "contentLeftItem active" : "contentLeftItem"}
                                key={c.cat_id}>
                                {c.cat_name}
                            </div>
                        })}
                    </div>
                    {/* 左边目录区结束 */}

                    {/* 右边内容区开始*/}
                    <div className="categoryContentRight">
                        {
                            this.state.rightContent.children && this.state.rightContent.children.map((v, i) => {
                                return <div className="contentRightItem" key={v.cat_id}>
                                    <div className="rightItemTitle">
                                        --{v.cat_name}--
                                    </div>

                                    {/* 商品列表开始 */}
                                    <div className="rightItemList">
                                        {v.children && v.children.map((vv => {
                                            return <div className="listProductItem" key={vv.cat_id} onClick={this.handleProductItemClick.bind(this, vv.cat_id)}>
                                                <div className="imgWrapper">
                                                    <img src={vv.cat_icon} alt="" />
                                                </div>
                                                <div className="title">
                                                    {vv.cat_name}
                                                </div>
                                            </div>
                                        }))}
                                    </div>
                                    {/* 商品列表结束 */}
                                </div>
                            })
                        }

                    </div>
                    {/* 右边内容区结束*/}
                </div>


                {/* 分类内容栏结束 */}

            </div>
        )
    }
}
export default withRouter(Community)
